import React, { Component } from 'react'
import { Link, RouteComponentProps } from 'react-router-dom';
import { InputItem,Button,List} from 'antd-mobile'
import { Post, Get, Patch, Put } from '../../utils/utilHttp'
import {CHANGE_INPUT,ADD_LIST,DEL_LIST} from '../../redux/actionType'
//action的工厂方法
import {changeInputAct,addListAct,delListAct,setListAct} from '../../redux/actionCreate';
import { connect } from 'react-redux'
import HomeUi from './homeUi'

interface IProps extends RouteComponentProps {
  [key:string]:any
}
//redux 使用实例
class Home extends Component<IProps,any> {
  constructor(props:any) {
    super(props);
    //订阅监听redux的变化
    //store.subscribe(this.storeChange);
  }
  state={ 
    inputValue:'',
    list:[]
  }
  componentDidMount(){
    setTimeout(() => {
      let resData=['吃饭1','睡觉1','打豆豆1'];
      // store.dispatch(getListAct(resData))
      this.props.setListAct(setListAct(resData))
    }, 200);
  }
  changeInput=(value:any)=>{
    this.setState({inputValue:value});
    //修改全局数据
    // store.dispatch(changeInputAct(value));
    this.props.changeInputAct(changeInputAct(value))
  }
  //获取redux数据
  // storeChange=()=>{
  //   // this.setState(store.getState())
  // }
  add =()=>{
    let {inputValue}=this.state;
    if(inputValue){
      // store.dispatch(addListAct(inputValue));
      this.props.addListAct(addListAct(inputValue))
    }
  }
  del=(index:number)=>{
    let {list}=this.props;
    list.splice(index,1);
    // store.dispatch(delListAct(list));
    this.props.delListAct(delListAct(list))
  }
  render() {
    let { list,inputValue } =this.props;
    return (
      <div className='todo_list'>
        <HomeUi list={list} inputValue={inputValue} changeInput={this.changeInput} add={this.add} del={this.del}></HomeUi>
      </div>
    )
  }
}
//将store里面的数据映射到props 这个数据
//就是取store的数据 然后操作 赋值给页面的变量
//将页面数据和全局数据绑定
const mapState = (store:any) => {
  return ({
    list: store.list,
    inputValue:store.inputValue
  })
}
//将 redux 方法 映射到props 
const mapDispatch = (dispatch:any) => ({
  setListAct(action:any){
    dispatch(action)
  },
  changeInputAct(action:any){
    dispatch(action)
  },
  addListAct(action:any){
    dispatch(action)
  },
  delListAct(action:any){
    dispatch(action)
  }
})
//返回了 connect 其实是一个容器组件
export default connect(mapState, mapDispatch)(Home); 